<template>
	<view class="main">
		<view class="status dis-cc" v-if="disabled">
			<image v-if="!form.status" src="@/static/common/icon-loading.png" alt="" />
			<image v-else src="@/static/common/icon-success.png" alt="">
			<view class="">
				  {{!form.status ? '发票开具中' : '发票开具成功' }}
				<!-- 发票开具成功 -->
			</view>
		</view>
		
		<view class="items item">
			<text class="text" >发票类型</text>
			<view class="item-right" @click="!disabled ? show = true : ''">
				<view class="ipt">
					<!-- {{}} -->
					{{form.type}}
				</view>
				<u-icon name="arrow-right" color="#666666" size="22"></u-icon>
			</view>
		</view>
		<view class="items item">
			<text class="text">发票抬头</text>
			<view class="item-right">
				<input class="ipt" v-model="form.companyName" placeholder="请输入" :disabled="disabled"/>
			</view>
		</view>
		<view class="items item">
			<text class="text">纳税人识别号</text>
			<view class="item-right">
				<input class="ipt" v-model="form.taxNumber" placeholder="请输入" :disabled="disabled"/>
			</view>
		</view>
		<view class="items item">
			<text class="text">邮箱地址</text>
			<view class="item-right">
				<input class="ipt" v-model="form.email" placeholder="请输入" :disabled="disabled"/>
			</view>
		</view>
		<view class="tips">
			注：发票开具后将发送到你提交的邮箱，请注意查收。
		</view>
		
		<view @click="submit" class="footer" v-if="!disabled">
			<view class="footer-btn">提交</view>
		</view>
		
		<!-- 发票选择框 -->
		<c-check title="选择发票" :show="show" :dataList="typeList" closeable field="name" @determine="setType" @close="show=false"></c-check>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				statusImgs: ['@/static/common/icon-loading.png','@/static/common/icon-success.png'],
				regionShow: false, //地区选择
				form: { //发票信息
					orderId:'',
					companyName:'',
					email:'',
					taxNumber:'',
					type:'请选择',
				},
				typeList: [
					{
						name: "专票"
					},
					{
						name: "普票"
					},
				],
				disabled: false
			}
		},
		methods: {
			setType(item) {
				this.show = false
				this.form.type = item.name
			},
			//选择用户的发票抬头。当前小程序必须关联一个公众号，且这个公众号是完成了微信认证的，才能调用 chooseInvoiceTitle。
			getCompanyName() {
				uni.chooseInvoiceTitle({
					success:(res)=> {
						this.form.companyName = res.title
						this.form.taxNumber = res.taxNumber
					}
				})
			},
			submit() {
				console.log('提交');
			}
		},
		onLoad(op) {
			// 开票
			// let info = JSON.parse(op.invoiceInfo) || ''
			// if(info) {
			// 	this.disabled = true
			// 	this.form = info
			// 	uni.setNavigationBarTitle({
			// 		title: '查看发票'
			// 	})
			// }
			// 未开票
			// this.form.orderId = op.id
			// this.getCompanyName()
		}

	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 30rpx;
		--iphonex-fix-bottom: env(safe-area-inset-bottom);
		padding-bottom: var(--iphonex-fix-bottom);
		padding-bottom: 178rpx;
		// min-height: calc(100vh - 100rpx);
	}

	.head {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin-right: 10rpx;
	}
	.status {
		flex-direction: column;
		padding: 150rpx 0;
		border-bottom: 8rpx solid #F7F7F7;
		font-size: 36rpx;
		font-weight: bold;
		color: #1A1A1A;
		>image {
			width: 280rpx;
			height: 280rpx;
			margin-bottom: 40rpx;
		}
		
	}
	.item {
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #EEEEEE;
		height: 140rpx;
		align-items: center;

	}
	.tips {
		margin-top: 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #FF833D;
	}

	.items {
		height: 110rpx;
	}

	.item-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.text {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.ipt {
		width: 280rpx;
		font-size: 24rpx;
		color: #666666;
		margin-right: 8rpx;
		text-align: right;
	}

	.ipt1 {
		width: 500rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 40rpx;
		--iphonex-fix-bottom: env(safe-area-inset-bottom);
		padding-bottom: var(--iphonex-fix-bottom);

		view {
			width: 670rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
			background: $c-bgColor;
			border-radius: 16rpx;
		}
	}
</style>